<template>
	<view class="">
		<view class="title-box">
			<u-cell-group>
				<u-cell-item title="缴费中心" :arrow="false" :title-style="{fontSize:'40rpx',fontWeight:700,color:'#000'}">
					<text class="but-right" @click="openEditRoom">缴费记录</text>
				</u-cell-item>
			</u-cell-group>
		</view>

		<view class="form">
			<u-form :model="form" ref="uForm" :labelWidth="160" :label-style="{'paddingLeft':'10rpx'}">
				<view class="item-box">
					<u-form-item label="当前房产" prop="roomId" :border-bottom="false">
						<view @tap="selectBol.roomId=true" class="wd-100">
							<u-section :title="property || '请选择'" color="#4A7ED7" :show-line="false"  :bold="false"
								:sub-title="null"></u-section>
							<u-select v-model="selectBol.roomId" :list="seleVisit" @confirm="selctConfirm($event,'roomId',true)"></u-select>
						</view>
					</u-form-item>
				</view>
				<view class="list-box">
					<!-- <view class="mb-30" v-for="(item,index) in List" :key="index" @click="openEdit">
						<u-cell-group :border="false">
							<u-cell-item :title="item.title" :value-style="{color:'#d25f62',fontSize:'32rpx',marginRight:'5rpx'}"
								:value="'￥'+item.num" :border-bottom="false" :border-top="false">
								<u-icon slot="icon" size="90" :name="item.icon" class="mr-30"></u-icon>
							</u-cell-item>
						</u-cell-group>
					</view> -->
					<view class="total" v-for="(item,index) in cardList" :key="index" @click="openEdit(item.billTypeId, form.roomId)">
						<u-cell-group :border="false">
							<u-cell-item :title="item.billTypeName" :value-style="{color:'#d25f62',fontSize:'32rpx',marginRight:'5rpx'}"
								:value="'￥'+item.amountOwed" :border-bottom="false" :border-top="false">
							</u-cell-item>
						</u-cell-group>
					</view>
				</view>
			</u-form>
		</view>
		<view class="po-but">
			<view class="sum">
				<view>
					合计：<text>￥0</text>
				</view>
				<view class="mt-20">
					抵用券：<text style="color:#999">暂无可用</text>
				</view>
			</view>
			<view>
				<u-button type="primary" :custom-style="customStyle" shape="circle">立即支付</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		householdinfo
	} from '@/api/base/householdinfoApi.js'
	import {
		billrecordBillTypeStatistics
	} from '@/api/fin/billrecordApi.js'
	import {
		getLocalImg
	} from '@/utils/localFileUtil.js';
	
	import { mapGetters } from 'vuex';
	
	export default {
		data() {
			return {
				property: '',
				cardList:'',
				customStyle: {
					width: '250rpx'
				},
				// List: [{
				// 		num: 0,
				// 		title: "水费",
				// 		icon: getLocalImg('wy_07.jpg')
				// 	},
				// 	{
				// 		num: 0,
				// 		title: "电费",
				// 		icon: getLocalImg('wy_01.jpg')
				// 	},
				// 	{
				// 		num: 0,
				// 		title: "物业费 ",
				// 		icon: getLocalImg('wy_03.jpg')
				// 	},
				// 	{
				// 		num: 0,
				// 		title: "供暖费",
				// 		icon: getLocalImg('wy_09.jpg')
				// 	}
				// ],
				tareaType: {
					type: 'textarea',
					border: false,
					height: 200,
					autoHeight: true,
					maxlength: 200
				},
				form: {
					roomId: '',
					billTypeId:''
				},
				seleVisit: [],
				selectBol: {
					roomId: false
				},
				rules: {
					roomId: [{
						required: true,
						message: '请选择当前房产',
						trigger: ['change', 'blur'],
					}]
				},
			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.$refs.uForm.setRules(this.rules);
			}),
			this.currentProperty();
		},
		computed: {
		  ...mapGetters(['user_info']),
		},
		methods: {
			//获取当前房产
			currentProperty() {
			    const proprietorId = this.user_info.id;
					console.log(this.user_info,'this.user_info')
			    householdinfo({ proprietorId })
			      .then(response => {
			       const newSelectData = response.map(data => ({
			           value: data.roomId, 
			           label: data.roomInfo
			         }));
			
			        this.seleVisit = newSelectData 
					//默认第一个房产信息显示
					this.form.roomId = newSelectData[0].value
					this.property = newSelectData[0].label 
						console.log(this.seleVisit,'this.seleVisit');
			      })
			      .catch(error => {
			        console.error('获取当前房产失败', error);
			      });
			  },
			  //获取费用信息
			  async loadData() {
			       try {
			  			const response = await billrecordBillTypeStatistics({roomId:this.form.roomId})
			              this.cardList = response
						  this.form.billTypeId = response.map(item => item.billTypeId);
			  			console.log("response",response[0].billTypeId)
			       } catch (error) {
			         console.error('error', error)
			       }
			  },
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			selctConfirm(e, type, isVisitorAim) {
				this.form[type] = e[0].value;
				this.property = e[0].label;
			},
			openEditRoom() {
			  if (this.form.roomId) {
			    uni.navigateTo({
			      url: '/subPack/com/payment/edit?roomId=' + this.form.roomId
			    });
			  } else {
			    // 当用户未选择房产时，显示提示信息
			    uni.showToast({
			      title: '请选择当前房产',
			      icon: 'none'
			    });
			  }
			},
			openEdit(billTypeId, roomId) {
				uni.navigateTo({
					url: '/subPack/com/payment/edit?roomId=' + roomId + '&billTypeId=' + billTypeId
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch: {
		    'form.roomId': function(newRoomId, oldRoomId) {
		      if (newRoomId !== oldRoomId) {
		        this.loadData();
		      }
		    }
		  }
	}
</script>

<style lang="scss" scoped>
	.po-but {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 20rpx 20rpx;
		box-shadow: 0px -5px 5px -5px rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.sum {
			color: #5f5f5f;

			text {
				color: #d25f62;
			}
		}
	}

	.present {
		color: $-color-muted;
		text-align: center;
	}

	.list-box {
		margin: 20rpx;

		>view {

			/deep/.u-cell-item-box {
				border-radius: 10rpx;
			}
		}
	}

	/deep/.u-input__right-icon {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
	}

	/deep/.u-add-wrap {
		border: 1px dashed $-color-border-wy;
		background-color: transparent !important;
		margin: 50rpx 0;

		.u-add-tips {
			display: none;
		}

		.u-icon__icon {
			color: $-color-but-wy;
		}
	}

	.item-box {
		position: relative;
		margin-bottom: 20rpx;
		padding: 0 30rpx;
		background-color: #fff;

		&.house {
			display: flex;
			justify-content: space-between;
		}

		/deep/.u-input__textarea {
			padding: 20rpx !important;
			background-color: $-color-item-bg;
			border-radius: 10rpx;
		}
	}

	.but-right {
		border: 1px solid $-color-but-wy;
		color: $-color-but-wy;
		border-radius: 50rpx;
		text-align: center;
		padding: 7rpx 20rpx;
	}

	/deep/.u-form-item {
		padding: 10rpx 10rpx 10rpx 0;

		.u-form-item--left__content__label {
			padding: 0 !important;
		}
	}
	.total{
		display: flex;
		margin: 30rpx 6rpx;
		font-size: 36rpx;
		justify-content: space-between;
		.amountOwed{
			color: #d25f62;
		}
	}
</style>